<div class="wrapper wrapper-content page-heading animated fadeInRight">
    <div class="row">
        <div class="col-lg-9">
            <div class="tabs-container">
                <ul class="nav nav-tabs" id="tab-list-2">
                    <li class="active" id="search-link"><a href="#search" role="tab" data-toggle="tab">Search</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="search">
                        <div class="panel-body">
                            <div class="ibox-title" style="border: none;"><h5 style="color: #00afef"><i>Search</i></h5>
                            </div>
                            <div class="ibox-content">
                                <div id="notify-gl" style="display: none;" class="alert alert-danger" role="alert">
                                  <strong>Error:</strong> Look's like your Input field is empty :)
                                </div>
                                <form class="form-horizontal" id="gl-search-form">
                                    <div class="form-group">
                                        <label class="col-xs-4 control-label">Code</label>
                                        <div class="col-xs-5">
                                            <input type="text" name="gl_code-s" class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-4 control-label">Name</label>
                                        <div class="col-xs-5">
                                            <input type="text" name="gl_name-s" class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-4 control-label">Type</label>
                                        <div class="col-xs-5">
                                            <input type="text" name="gl_type-s" class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-4 control-label">Sub-Type</label>
                                        <div class="col-xs-5">
                                            <input type="text" name="gl_sub-type-s" class="form-control">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-4 control-label">Enable</label>
                                       <div class="col-xs-5">
                                            <input type="checkbox" name="gl_enabled-s" class="i-checks">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-4 control-label"></label>
                                        <div class="col-xs-5 col-md-5">
                                            <a href="javascript:document.getElementById('gl-search-form').reset();" class="pull-right btn btn-warning btn-md m-t-n-xs clear-btn" id="search-form"> Clear</a>
                                            <button class="btn btn-primary btn-md m-t-n-xs search-btn pull-right btn-margin-right" id="search-glaccount"> Search</button>
                                        </div>
                                    </div>
                                </form>
                                </div>
                                <button class="btn btn-success btn-md m-t-n-xs add-tab-btn" id="add-glaccount-tab"> Add</button>
                                <div class="ibox-content">
                                    <div class="table-responsive">
                                    <table class="table table-bordered table-compact">
                                        <thead>
                                            <tr>
                                                <th>Code</th>
                                                <th>Name</th>
                                                <th>Type</th>
                                                <th>Sub-Type</th>
                                                <th>Enable</th>
                                                <th style="padding:8px;text-align:center;width:75px;">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody id="search-glacc-result">
                                        </tbody>
                                    </table>
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- END of class row-->
    <div class="row" style="display: none;">
            <div class="col-lg-8">
                <div class="ibox float-e-margins">
                    <div class="ibox-title"><h5 style="color: #00afef"><i>Accounting Periods</i></h5>
                        <div class="ibox-tools">
                            <button class="btn btn-primary btn-sm" type="">Save</button>
                            <button id="" class="btn-outline btn btn-primary btn-sm" type="submit">Cancel</button>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="col-lg-2 control-label">Business Unit</label>
                                <div class="col-lg-3">
                                    <input type="text" class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-2 control-label">Fiscal Year</label>
                                <div class="col-lg-2">
                                    <input type="number" value="2015" class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-2 control-label">Name</label>
                                <div class="col-lg-5">
                                    <input type="text" class="form-control">
                                </div>
                            </div>
                             <div class="form-group" id="data_5">
                                <label class="col-lg-2 control-label">Date Range</label>
                                <div class="col-lg-5">
                                    <div id="datepicker" class="input-daterange input-group">
                                        <input type="text" value="10/05/2015" name="start" class="input-sm form-control">
                                        <span class="input-group-addon">to</span>
                                        <input type="text" value="10/20/2015" name="end" class="input-sm form-control">
                                    </div>
                                </div>
                            </div>
                           <!--  <div class="form-group" id="start-date">
                                <label class="col-lg-2 control-label">Start Date</label>
                                <div class="col-lg-3">
                                   <div class="input-group date">
                                        <span class="input-group-addon">
                                            <i class="fa fa-calendar"></i>
                                        </span>
                                        <input type="text" value="08/09/2014" class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group" id="end-date">
                                <label class="col-lg-2 control-label">End Date</label>
                                <div class="col-lg-3">
                                   <div class="input-group date">
                                        <span class="input-group-addon">
                                            <i class="fa fa-calendar"></i>
                                        </span>
                                        <input type="text" value="08/09/2014" class="form-control">
                                    </div>
                                </div>
                            </div> -->
                            <div class="form-group">
                                <label class="col-lg-2 control-label">Status</label>
                                <div class="col-lg-2">
                                    <input type="text" class="form-control" value="Pending" disabled>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div><!-- END of class row-->
</div>
<input type="hidden" id="count_add" value="0">
<input type="hidden" id="count_edit" value="0">
<input type="hidden" id="count_view" value="0">
<script>
    $(document).ready(function() {
        $('#tab-list-2').on('click','#viewX',function(){
            var tabId = $(this).parents('li').children('a').attr('href');
            $(this).parents('li').remove('li');
            $(tabId).remove();
            $('#tab-list-2 a:first').tab('show');
            if(tabId == "#view"){
                $('#count_view').val('0');
            }else if(tabId == "#edit"){
                $('#count_edit').val('0');
            }else{
                $('#count_add').val('0');
            }
        });

        $('#add-glaccount-tab').click(function(){
             if($('#count_add').val() == 0){
                $('#tab-list-2').append('<li id="add-link"><a href="#add" role="tab" data-toggle="tab">Add<button id="addX" style="margin-left:10px;" class="close" type="button" title="Remove this page">×</button></a></li>');
                $('.tab-content').append('<div class="tab-pane" id="add"><div class="panel-body"><div id="add_data"><div class="sk-spinner sk-spinner-double-bounce"><div class="sk-double-bounce1"></div><div class="sk-double-bounce2"></div></div></div></div></div>');
                $('#add-link').show();
                $('#count_add').val('1');
                $("#add_data").load("<?php echo $this->session->userdata('forload') . '/add_form/'; ?>",function(response, status, xhr) {
                  if (status == "error") {
                        var msg = "Sorry but there was an error: ";
                        notifymsg('danger',msg + xhr.status + " " + xhr.statusText);
                      }
                  });
            }
            $('#tab-list-2 a[href="#add"]').tab('show');

        });

        $(document).on('click', '.btn.btn-primary.btn-outline.btn-sm.edit-tab', function(){
            var acct_id = $(this).closest('tr').children('#acct_id_v').text();
            if($('#count_edit').val() == 0){
                $('#tab-list-2').append('<li id="edit-link"><a href="#edit" role="tab" data-toggle="tab">Edit<button id="editX" style="margin-left:10px;"class="close" type="button" title="Remove this page">×</button></a></li>');
                $('.tab-content').append('<div class="tab-pane" id="edit"><div class="panel-body"><div id="edit_data"><div class="sk-spinner sk-spinner-double-bounce"><div class="sk-double-bounce1"></div><div class="sk-double-bounce2"></div></div></div></div></div>');
                $('#edit-link').show();
                $('#count_edit').val('1');
            }
            $('#tab-list-2 a[href="#edit"]').tab('show');
            $("#edit_data").load("<?php echo $this->session->userdata('forload') . '/edit_form/'; ?>/"+ acct_id,function(response, status, xhr) {
              if (status == "error") {
                    var msg = "Sorry but there was an error: ";
                    notifymsg('danger',msg + xhr.status + " " + xhr.statusText);
                  }
              });
        });

        $(document).on('click', '.btn.btn-primary.btn-outline.btn-sm.view-tab', function(){
            var acct_id = $(this).closest('tr').children('#acct_id_v').text();
            if($('#count_view').val() == 0){
                $('#tab-list-2').append('<li id="view-link"><a href="#view" role="tab" data-toggle="tab">View<button id="viewX" style="margin-left:10px;"class="close" type="button" title="Remove this page">×</button></a></li>');
                $('.tab-content').append('<div class="tab-pane" id="view"><div class="panel-body"><div id="view_data"><div class="sk-spinner sk-spinner-double-bounce"><div class="sk-double-bounce1"></div><div class="sk-double-bounce2"></div></div></div></div></div>');
                $('#view-link').show();
                $('#count_view').val('1');
            }
            $("#view_data").load("<?php echo $this->session->userdata('forload') . '/view_form/'; ?>"+acct_id,function(response, status, xhr) {
              if (status == "error") {
                    var msg = "Sorry but there was an error: ";
                    notifymsg('danger',msg + xhr.status + " " + xhr.statusText);
                  }
              });
            $('#tab-list-2 a[href="#view"]').tab('show');
        });

        $('#search-glaccount').click(function(e){
            $('#search-glacc-result').html('');
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: "<?php echo base_url($this->session->userdata('forajax') . '/gl_acc_search'); ?>",
                data: $('#gl-search-form').serialize(),
                dataType: 'json',
                success: function(e){
                    if(e == 'No results found.'){
                        notifymsg('success','<b>Success</b>: 0 Result Found.');
                        $('#search-glacc-result').append("<td colspan='6' align='center'><h3>No Result Found</h3></td>");
                    }else{
                        var trHTML = '';
                        var cb_state = "hover";
                        var count = 0;
                        $.each(e, function(i, item) {
                            if(e[i].enable_flag == "Y"){
                            cb_state = "checked";
                            }
                            trHTML += '<tr style="line-height:1;padding:2px;"><td id="acct_id_v" style="display:none;">'+ e[i].account_id +'</td><td id="sub_type-v" style="display:none;">'+ e[i].sub_type +'</td><td id="acct_type-v" style="display:none;">'+ e[i].acct_type +'</td><td id="company_id-v" style="display:none;">'+ e[i].company_id +'</td><td id="acct-code-v">'+ e[i].acct_code +'</td><td id="acct-name-v">'+ e[i].acct_name +'</td><td id="acct_type_meaning-v">'+ e[i].acct_type_meaning +'</td><td id="sub_type_meaning-v">'+ e[i].sub_type_meaning +'</td><td id="ena-flag-v" style="display:none;">'+ e[i].enable_flag +'</td><td align="center"><div style="cursor: default;" class="state icheckbox_square-green '+cb_state+'"></div></td><td align="center"><button type="button" class="btn btn-sm btn-primary btn-xs btn-outline edit-tab" data-toggle="tab" href="#add" title="Edit"><i class="fa fa-pencil-square-o fa-lg"></i></button><button type="button" class="btn btn-outline btn-sm btn-primary btn-xs view-tab" data-toggle="tab" role="tab" href="#view-3" title="View"><i class="fa fa-file-text-o fa-lg"></i></button></td></tr>';
                            count++;
                        });
                        notifymsg('success','<b>Success</b>:'+ count +' Result Found.');
                        $('#search-glacc-result').append(trHTML);
                    }
                },
                complete: function(data) {
                    $('#search-glaccount').removeAttr('disabled');
                },
                beforeSend: function(){
                    $('#search-glaccount').attr('disabled',true);
                }
            });
        });

    });
</script>